<script lang="ts" setup>
import { getCurrentInstance, reactive, ref } from 'vue'
import { onLoad, onPageScroll, onReady } from '@dcloudio/uni-app'
import TnNoticeBar from '@tuniao/tnui-vue3-uniapp/components/notice-bar/src/notice-bar.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import { useScrollTransparentNavbar } from '@/hooks'
import system from '@/api/system.js'
import { USER_INFO } from '@/api/config'

// 导航栏的高度
const navbarHeight = ref(0)
const instance = getCurrentInstance()
const state = reactive({
  showPopup: false,
  userScore: 0,
  giveScore: 0,
  todayIsSignin: 0,
  calendar: [],
  signinExplain: '',
  signinUser: [],
  taskList: [
    {
      title: '每日签到',
      desc: '每天签到，即可获取积分',
      jumpUrl: '',
    },
  ],
  userInfo: {
    score: 0,
  },
})

const { init: initTransparentScroll, opacityScrollHandle } =
  useScrollTransparentNavbar(instance)

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}

const signin = () => {
  system
    .signin()
    .then((res) => {
      if (res.code == 1) {
        uni.setStorageSync(USER_INFO, res.data.userInfo)
        state.userScore =
          Number(state.userScore) + Number(res.data.signData.give_score)
        state.giveScore = res.data.signData.give_score
        state.todayIsSignin = 1
        state.showPopup = true

        state.userInfo.score = state.userScore
        uni.setStorageSync(USER_INFO, state.userInfo)
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

const signinData = () => {
  system
    .signinData()
    .then((res) => {
      if (res.code == 1) {
        state.calendar = res.data.calendar
        state.signinExplain = res.data.signinExplain
        state.signinUser = res.data.signinUser
        state.todayIsSignin = res.data.todayIsSignin
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

onLoad((options) => {
  const userInfo = uni.getStorageSync(USER_INFO)
  if (userInfo) {
    state.userScore = userInfo.score
    state.userInfo = userInfo
  }
  signinData()
})

onReady(() => {
  initTransparentScroll()
})

onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop)
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      back-icon="left-arrow"
      back-text=""
      home-icon=""
      bg-color="rgba(255, 255, 255, 0)"
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    />
    <view class="template-spread">
      <!-- 顶部渐变底色，需要的显示出来即可 -->
      <view class="top-bg">
        <view class="bg-pic" style="position: absolute; right: 40rpx">
          <image
            class="bg-image"
            src="@/static/images/cal.png"
            mode="widthFix"
          />
        </view>
      </view>

      <view class="" :style="{ paddingTop: `${navbarHeight + 10}px` }">
        <view class="" style="position: relative">
          <view class="bg-notice">
            <TnNoticeBar
              :data="state.signinUser"
              bg-color="transparent"
              direction="vertical"
              left-icon="starry"
            />
          </view>
          <view class="tn-m tn-pt-sm" style="color: #001e50; font-size: 50rpx">
            <text class="tn-text-bold">{{ state.userScore }}</text>
            <text class="tn-pl-xs tn-text-xs">积分</text>
          </view>
          <view
            class="tn-m tn-text-sm"
            style="color: #001e50"
            @click="tnNavPage('/pagesA/scorelog')"
          >
            积分记录
            <TnIcon name="right" />
          </view>
        </view>
        <view class="" style="position: relative">
          <view
            class="tn-m tn-p-sm"
            style="border-radius: 20rpx; background-color: #ffffff"
          >
            <view
              class=""
              style="
                border-bottom: 4rpx solid #ecf0f9;
                position: relative;
                top: 80rpx;
                width: 80%;
                margin: 0 auto;
              "
            />
            <view class="tn-flex tn-flex-wrap justify-center tn-pt-lg tn-pb">
              <view
                v-for="(item, index) in state.calendar"
                :key="index"
                style="width: 14%"
              >
                <view
                  class="tn-flex tn-flex-column justify-center items-center"
                >
                  <view
                    v-if="item.currentIsSignin == 1"
                    class="icon12__item--icon tn-flex justify-center items-center"
                    style="
                      border: 1rpx solid #e5bc81;
                      color: #e5bc81;
                      background-color: #f7efe6;
                    "
                  >
                    <TnIcon name="success" />
                  </view>
                  <view
                    v-else
                    class="icon12__item--icon tn-flex justify-center items-center"
                  >
                    <TnIcon name="calendar" />
                  </view>
                  <view class="tn-text-center tn-pb-sm" style="color: #95a3a8">
                    <text class="tn-text-ellipsis tn-text-sm">
                      {{ item.currentDate }}
                    </text>
                  </view>
                </view>
              </view>
            </view>
            <view
              class="tn-flex-1 justify-center items-center tn-m-xs tn-text-center"
            >
              <TnButton
                v-if="state.todayIsSignin == 0"
                shape="round"
                bg-color="#01beff"
                text-color="#FFFFFF"
                font-size="30"
                width="100%"
                :custom-style="{ padding: '26rpx 0' }"
                @click="signin"
              >
                立即签到
              </TnButton>
              <TnButton
                v-else
                shape="round"
                bg-color="#DFE4E8"
                text-color="#95A3A8"
                font-size="30"
                width="100%"
                :custom-style="{ padding: '26rpx 0' }"
              >
                今日已签到
              </TnButton>
            </view>

            <view class="tn-strip-bottom-min tn-p" style="color: #95a3a8">
              坚持每天连续签到可以获得更多奖励哦
            </view>

            <view
              class="tn-pl tn-pright tn-pt tn-pb tn-text-sm"
              style="color: #95a3a8"
            >
              温馨提示：<br />
              {{ state.signinExplain }}
            </view>
          </view>

          <view class="tn-pt-sm">
            <view class="tn-flex justify-start items-center tn-m" @click="">
              <view
                class="justify-start items-center tn-text-bold tn-text-lg tn-pl-xs"
              >
                做任务领积分
              </view>
              <!-- <view
                class="justify-center items-center tn-text-df"
                style="color: #c1cacf"
              >
                <text class="tn-p-xs">更多</text>
                <TnIcon name="right" />
              </view> -->
            </view>

            <view
              v-for="(item, index) in state.taskList"
              :key="index"
              class="tn-shadow"
              style="
                background-color: #ffffff;
                border-radius: 24rpx;
                margin: 0 30rpx 30rpx 30rpx;
              "
            >
              <view
                class="tn-flex items-center tn-flex-row tn-p"
                style="color: #333333"
              >
                <view class="justify-start" style="width: 70vw">
                  <view class="tn-text-bold"> {{ item.title }} </view>
                  <view class="tn-text-sm tn-pt-xs" style="color: #aaaaaa">
                    {{ item.desc }}
                  </view>
                </view>
                <view
                  class="tn-flex justify-end tn-text-bold tn-text-sm"
                  style="width: 20vw"
                >
                  <TnButton
                    shape="round"
                    bg-color="#01beff"
                    text-color="#FFFFFF"
                    width="130rpx"
                    :custom-style="{
                      padding: '14rpx 0',
                      borderRadius: '50rpx',
                      fontSize: '22rpx',
                    }"
                    @click="tnNavPage(item.jumpUrl)"
                  >
                    去完成
                    <TnIcon name="right-fill" />
                  </TnButton>
                </view>
              </view>
            </view>
          </view>

          <view class="tn-tabbar-height" />
        </view>
        <TnPopup v-model="state.showPopup">
          <view class="tn-text-center" style="padding-bottom: 1vh">
            <view
              class=""
              style="
                background-color: #ffffff;
                border-radius: 20rpx;
                width: 70vw;
                margin: 0 auto;
                position: relative;
                z-index: 999;
              "
            >
              <view class="tn-text-xl tn-text-bold" style="padding-top: 40rpx">
                签到成功
              </view>
              <view class="tn-p" style="color: #838383">
                <text>恭喜您，获得</text>
                <text
                  class=""
                  style="
                    padding-left: 6rpx;
                    padding-right: 6rpx;
                    color: #ff7043;
                  "
                  >{{ state.giveScore }}</text
                >
                <text>积分</text>
              </view>
              <view class="tn-p" style="color: #aaaaaa">
                <text>连续签到可获得更多奖励哦！</text>
              </view>
            </view>
          </view>
        </TnPopup>
      </view>

      <view class="tn-tabbar-height" />
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
.template-spread {
  min-height: 100vh;
  background: #f6f8f7;
}

.icon12 {
  &__item {
    width: 30%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 70rpx;
      height: 70rpx;
      font-size: 30rpx;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;
      color: #6a767d;
      border-radius: 100rpx;
      background-color: #ecf0f9;

      &::after {
        content: ' ';
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        padding: 20rpx;
        left: 0;
        bottom: 0;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
      }
    }
  }
}

.top-bg {
  position: absolute;
  // background: linear-gradient(90deg, #d8feda, #F6F6F6);
  background: linear-gradient(120deg, #fefdd3, #fafcef, #e5fdf5, #fefbea);
  top: 0;
  width: 100%;
  height: 580rpx;
  transition: all 0.25s ease-out;
  z-index: 0;
}
.top-bg:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  mask-image: linear-gradient(to bottom, transparent, black);
  background: linear-gradient(90deg, #f6f7f9, #f6f7f9);
}

.bg-notice {
  color: #ffffff;
  background-color: #001e5020;
  padding: 4rpx;
  margin: 0 30rpx 30rpx 30rpx;
  border-radius: 16rpx;
}

/* 日历 */
.bg-image {
  width: 240rpx;
  height: 192rpx;
  position: relative;
  overflow: hidden;
}

.bg-pic {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  bottom: 130rpx;
  /*  #ifdef MP-WEIXIN */
  bottom: 70rpx;
  /* #endif */
}

/* 标签 */
.tag-border-cyan {
  display: inline-block;
  padding: 8rpx 16rpx;
  margin: 0 15rpx 10rpx 0;
  border-radius: 10rpx;
  background-color: #2de8bd08;
  color: #2de8bd;
  border: 1rpx solid #2de8bd;
  font-size: 16rpx;
}
.tag-border-yellow {
  display: inline-block;
  padding: 8rpx 16rpx;
  margin: 0 15rpx 10rpx 0;
  border-radius: 10rpx;
  background-color: #ffd10008;
  color: #ffd100;
  border: 1rpx solid #ffd100;
  font-size: 16rpx;
}
.tag-border-orange {
  display: inline-block;
  padding: 8rpx 16rpx;
  margin: 0 15rpx 10rpx 0;
  border-radius: 10rpx;
  background-color: #fea50008;
  color: #fea500;
  border: 1rpx solid #fea500;
  font-size: 16rpx;
}
.tag-border-green {
  display: inline-block;
  padding: 8rpx 16rpx;
  margin: 0 15rpx 10rpx 0;
  border-radius: 10rpx;
  background-color: #1fc77308;
  color: #1fc773;
  border: 1rpx solid #1fc773;
  font-size: 16rpx;
}
.tag-bg {
  display: inline-block;
  padding: 8rpx 16rpx;
  margin: 0 15rpx 10rpx 0;
  border-radius: 10rpx;
  background-color: #e6e9ee;
  color: #001e50;
  border: 1rpx solid #001e5080;
  font-size: 16rpx;
}

.logo-image {
  width: 48rpx;
  height: 48rpx;
  position: relative;
  overflow: hidden;
  border-radius: 100rpx;
  border: 1rpx solid #dfe4e8;
}

.logo-image-yes {
  width: 48rpx;
  height: 48rpx;
  position: relative;
  overflow: hidden;
  border-radius: 100rpx;
  border: 1rpx solid #1fc773;
}

.logo-image-no {
  width: 48rpx;
  height: 48rpx;
  position: relative;
  overflow: hidden;
  border-radius: 100rpx;
  border: 1rpx solid #ff0033;
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
  overflow: hidden;
  // background-color: #FFFFFF;
}

.image-product {
  border-radius: 8rpx;
  width: 160rpx;
  height: 160rpx;
  position: relative;
  border: 1rpx solid #dfe4e8;
}

.image-pic {
  width: 160rpx;
  height: 160rpx;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10rpx;
}

/* 间隔线 start*/
.tn-strip-bottom-min {
  width: 100%;
  border-bottom: 1rpx solid #f8f9fb;
}

.tn-strip-bottom {
  width: 100%;
  border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}
/* 间隔线 end*/

/* 底部安全边距 start*/
.tn-tabbar-height {
  min-height: 40rpx;
  height: calc(60rpx + env(safe-area-inset-bottom) / 2);
  height: calc(60rpx + constant(safe-area-inset-bottom));
}
</style>
